<template>
  <loginBackground v-model:out-fix-style="fixStyle">
    <q-page class="flex flex-center" :style="fixStyle">
      <div class="full-width row justify-center">
        <div class="col-11 col-xl-2 col-md-3 col-sm-11">
          <q-card class="my-card q-py-md">
            <q-card-section class="text-grey-9 text-center">
              <q-avatar size="90px" class="q-mb-sm bg-white">
                <img :src="siteInfo.loginLogo" />
              </q-avatar>
              <div class="text-h6 text-weight-bold">
                {{ siteInfo.appName }}
              </div>
              <div class="text-subtitle2">
                {{ siteInfo.subTitle }}
              </div>
            </q-card-section>
            <q-separator inset />
            <q-card-section>
              <q-form class="q-gutter-md" @submit="onSubmit">
                <q-input
                  v-model="formData.tenant"
                  filled
                  rounded
                  label="组织名称"
                  :rules="[val => !!val || '组织名称不能为空']"
                >
                  <template v-slot:prepend>
                    <q-icon name="groups" />
                  </template>
                  <template v-slot:append v-if="formData.tenant">
                    <q-icon name="close" class="cursor-pointer" @click="formData.tenant = ''" />
                  </template>
                </q-input>

                <q-input
                  v-model="formData.nickname"
                  filled
                  rounded
                  label="用户名"
                  :rules="[val => !!val || '用户名不能为空']"
                >
                  <template v-slot:prepend>
                    <q-icon name="account_circle" />
                  </template>
                  <template v-slot:append v-if="formData.nickname">
                    <q-icon name="close" class="cursor-pointer" @click="formData.nickname = ''" />
                  </template>
                </q-input>

                <q-input
                  v-model="formData.password"
                  filled
                  rounded
                  :type="isPwd ? 'password' : 'text'"
                  label="密码"
                  :rules="[val => !!val || '密码不能为空']"
                >
                  <template v-slot:prepend>
                    <q-icon name="lock" />
                  </template>
                  <template v-slot:append>
                    <q-icon
                      :name="isPwd ? 'visibility_off' : 'visibility'"
                      class="cursor-pointer"
                      @click="isPwd = !isPwd"
                    />
                  </template>
                </q-input>
                <div>
                  <q-btn class="full-width" label="登录" type="submit" color="primary" rounded />
                </div>
              </q-form>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </q-page>
    <copyright />
  </loginBackground>
</template>
<script>
import { defineComponent } from 'vue';
import loginBackground from 'components/LoginBackground.vue'
import copyright from 'components/copyright.vue'
import { mapState } from 'pinia';
import { useStore } from 'stores/store';
import md5 from 'md5';

export default defineComponent({
  name: 'loginTenant',
  components: {
    loginBackground,
    copyright
  },
  data () {
    return {
      fixStyle: {},
      isPwd: true,
      formData: {
        tenant: '',
        nickname: '',
        password: ''
      }
    };
  },
  mounted () {
    const tenantName = this.$q.localStorage.getItem('tenant_login');
    this.formData.tenant = tenantName && tenantName !== 'null' ? tenantName : '';
  },
  methods: {
    async onSubmit () {
      const formData = { ...this.formData };
      formData.password = md5(formData.password);

      this.$axios.post('/c/login/verify', formData).then(({ data }) => {
        if (data.result === 'fail') {
          this.$q.notify({
            message: data.message,
            color: 'negative',
            icon: 'error',
            position: 'center',
            timeout: 2000
          });
        } else {
          const { token, tenant, user, role } = data;

          this.$q.localStorage.set('token', 'Bearer ' + token);
          this.$q.localStorage.set('tenant', tenant);
          this.$q.localStorage.set('user', user);
          this.$q.localStorage.set('role', role);

          this.$q.localStorage.set('tenant_login', tenant.tenant_name);

          const path = this.$route.query.redirect || '/main/index';
          this.$router.replace({ path });
        }
      });
    }
    /*  wechatLogin () {
      const { state, code } = this.$route.query;

      if (!state || !code) { // 无授权，跳转进入授权
        this.$axios.get('/c2/manager/wechat/getAuthorizeURL').then(res => {
          if (res.data) {
            window.location.href = res.data;
          }
        });
      } else { // 已有授权，尝试自动登录
        this.$axios.post('/c/login/verifyFromWechat', { code, state }).then(({ data }) => {
          if (data.result === 'fail') {
            this.$q.notify({
              message: data.message,
              color: 'negative',
              icon: 'error',
              position: 'center',
              timeout: 2000
            });
          } else {
            LocalStorage.set('userid', data.data.id);
            LocalStorage.set('nickname', data.data.nickname);
            LocalStorage.set('token', 'Bearer ' + data.data.token);
            LocalStorage.set('rights', data.data.rights);
            const path = this.$route.query.redirect || '/main/index';
            this.$router.replace({ path });
          }
        });
      }
    } */
  },
  computed: {
    ...mapState(useStore, ['siteInfo'])
  }
});
</script>

<style scoped>
.my-card {
  background-color: rgba(255, 255, 255, 0.7);
}
</style>
